<template>
    <!-- 加载更多 -->
    <div class="container" ref="loadmoreBox" :class="type" v-infinite-scroll="loadBottomAjax" infinite-scroll-disabled="bottomLock" infinite-scroll-distance="10" infinite-scroll-immediate-check="false">
        <!-- 请求提示 -->
        <my-loading :visible="loading" :reload="init" />
        
        <!-- 顶部提示 -->
        <div class="globalTip">
            <div class="dataCount">已为你推荐{{dataCount}}条新内容</div>
            <div class="noNewData">已为您更新到最新内容</div>
            <div class="requestFail">网络请求失败,请检查网络</div>
        </div>

        <!-- 下拉加载 -->
        <mt-loadmore :top-method="loadTopAjax" @top-status-change="handleTopChange" ref="loadmore" :auto-fill='false' :distance='indexSwiper'>
            <!-- 下拉提示 -->
            <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus == 'pull'"><img class='pullLoading' src="~@/assets/loading.png"> 下拉刷新↓</span>
                <span v-show="topStatus == 'drop'"><img class='pullLoading' src="~@/assets/loading.png"> 释放更新↑</span>
                <span v-show="topStatus == 'loading'"><img class='pullLoading animate' src="~@/assets/loading.png"> 加载中...</span>
            </div>
            <!-- listItem --> 
            <list-item :itemJson="contentJson" v-if='contentJson.length > 0'/>
            <!-- 底部提示 -->
            <div class="bottomLoad" v-if="contentJson.length > 0">
                <div class="loading" v-show='bottomLoading'>加载中...</div>
                <div class="noData" v-if='bottomNoData'>没有更多的内容了</div>
            </div>
        </mt-loadmore>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import listItem from './listItem'                       // 文章列表组件
import myLoading from '@/components/loading'            // loading组件
export default {
    props: ['type'],
    components: { listItem, myLoading },
    data() {
        return {
            classPage: 1,           // 当前栏目的翻页页数
            newId: '',              // 当前数据列表的第一条新闻的ID 用以判断当前是否有新闻更新
            contentJson: [],        // 整个列表数据
            dataCount: 0,           // 推荐文章数量
            topStatus: '',          // 下拉状态
            bottomLock: false,      // 上滑开关
            bottomLoading: true,    // 底部loading
            bottomNoData: false,    // 底部nothing
            loading: false
        }
    },
    computed: {
        ...mapState('index', [
          'indexActive',
          'indexPage',
          'indexLocation',
          'indexSwiper'
        ]),
        ...mapGetters('index', [
          'activeMeta'
        ])
    },
    watch: {
        indexActive(val) {
            this.init()
        },
        classPage(val) {
            this.indexPage[this.indexActive] = val
            this.set_indexPage(this.indexPage)
        },
        contentJson(val) {
            this.set_currentContent(val)
        }
    },
    mounted() {
        this.init()
    },
    activated(){
        this.getScroll()
    },
    methods: {
        ...mapMutations('index', [
            'set_currentContent',
            'set_indexPage',
            'set_indexLocation'
        ]),
        ...mapActions('index', [
            'get_listItem_cache',
            'get_listItem_data',
        ]),
        init() {
            if (this.indexActive === this.type) {
                this.loading = 'loading'
                this.classPage = this.activeMeta.page
                // 栏目的缓存？缓存 : 发送请求
                this.get_listItem_cache(this.indexActive)
                .then(res => {
                    if (res && res.length>0) {
                        this.contentJson = res
                        this.newId = res[0].newId
                        this.loading = false
                        this.getScroll()
                    } else {
                        this.loadTopAjax()
                    }
                })
            }
        },
        // 顶部下拉请求
        loadTopAjax() {
            this.bottomLock = false;      // 上滑开关
            this.bottomLoading = true;    // 底部loading
            this.bottomNoData = false;   // 底部nothing
            this.classPage = 1;
            
            this.get_listItem_data({
                page: this.classPage,
                newId: this.newId
            }).then(res => {
                this.loading = false
                if( res.dataList ){
                    this.contentJson = res.dataList
                    this.newId = this.contentJson[0].newId
                    this.dataCount = res.refreshNumber
                    this.classPage++
                }
                // 只有一页
                if( res.lastPage ){
                    this.bottomLock = true
                    this.bottomLoading = false
                    this.bottomNoData = true
                }
                if( res.refreshNumber >= 1 ){
                    // 文章数量提示
                    $(`.container.${this.type} .dataCount`).slideDown(200).delay(1000).slideUp(200)
                }else{
                    // 没有文章数据提示
                    $(`.container.${this.type} .noNewData`).slideDown(200).delay(1000).slideUp(200)
                }
                this.$refs.loadmore.onTopLoaded()   // mint-ui 下拉组件的方法
                this.loading = false
                $(`.container.${this.type} .requestFail`).hide()
            })
            .catch(err => {
                // 新闻列表为空 或 网络请求错误
                console.log('loadTop发生错误', err)
                if (this.contentJson.length > 0) {
                    $(`.container.${this.type} .requestFail`).show()
                    setTimeout(()=>{
                        this.loading = false
                        $(`.container.${this.type} .requestFail`).hide()
                    },1000)
                } else {
                   this.loading = 'error'
                }
                this.topStatus = ''
                this.$refs.loadmore.onTopLoaded()
            })
        },
        // 底部上滑请求
        loadBottomAjax () {
            this.bottomLock = true  // 上滑开关
            this.get_listItem_data({
                page: this.classPage,
                newId: ''
            }).then(res => {
                if (res.dataList) {
                    this.contentJson.push(...res.dataList)
                    this.classPage++
                }
                // 已经是最后一页了
                if( res.lastPage ){
                    this.bottomLoading = false
                    this.bottomNoData = true
                    this.bottomLock = true
                }else{
                    this.bottomLock = false
                }
            })
        },
        // mint-ui 下拉组件的状态
        handleTopChange(status) {
            this.topStatus = status
        },
        saveScroll(){
            let scrollTop = $(`.container.${this.type}`).scrollTop()
            if (scrollTop >= 0) {
                this.indexLocation[this.indexActive] = scrollTop
                this.set_indexLocation(this.indexLocation)
            }
        },
        getScroll(){
            if (this.indexActive === this.type) {
                $(`.container.${this.type}`).animate({scrollTop: this.activeMeta.location},50)
                this.$refs.loadmoreBox.addEventListener('scroll', this.saveScroll)
            }
        },
    },
    deactivated() {
        this.$refs.loadmoreBox.removeEventListener('scroll', this.saveScroll)
    }
}
</script>

<style lang='stylus'>
.container {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    .globalTip{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        div{
            height: 32px;
            line-height: 34px;
            font-size: 14px;
            color: #5f88ff;
            background: rgba(213, 233, 247, .8);
            text-align: center;
            display: none;
            &.requestFail {
                color: #d06e6e;
                background: #FBE9EF;
            }
        }
    }
    .mint-loadmore-top {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        color: #999;
    }
    .pullLoading{
        width: 20px;
        height: 20px;
        vertical-align: middle;
        display:inline-block;
        &.animate{
            -webkit-animation:change 2s linear infinite;
        }
    }
    .bottomLoad{
        width: 100%;
        position: relative;
        div{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color: #999;
        }
    }
}
@-webkit-keyframes change{
　　0%{-webkit-transform:rotate(0deg);}
　　50%{-webkit-transform:rotate(180deg);}
　　100%{-webkit-transform:rotate(360deg);}
}
</style>
